<template>
  <el-dialog
    width="60%"
    :title="rowData.snapshot.title + ' 退款'"
    :visible.sync="showDia"
    v-if="showDia"
    append-to-body
  >
    <div>
      <el-table :data="[rowData]" stripe style="width: 100%">
        <el-table-column label="商品描述" width="200" align="center">
          <template slot-scope="scope">
            <div style="flex-direction: row;align-items: center;">
              <img
                :src="scope.row.snapshot.cover"
                style="width:40px;height:40px;vertical-align: middle; margin-right:5px;"
              >
              <span>{{ scope.row.snapshot.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="auto" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.snapshot.sku }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价" width="auto" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.snapshot.price}}</span>
          </template>
        </el-table-column>
        <el-table-column width="auto" label="数量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.amount}} {{ scope.row.snapshot.unit_txt}}</span>
          </template>
        </el-table-column>
        <el-table-column label="小计">
          <template slot-scope="scope">
            <span>{{ (scope.row.snapshot.price*scope.row.amount) | numFilter}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:20px;">
      <el-form :model="refund" ref="special" label-width="80px">
        <el-form-item v-if="isSpecial" label="长度(米)" prop="len">
          <el-input v-model="refund.len" style="width:80px;" placeholder="长度"></el-input>
        </el-form-item>
        <el-form-item v-if="isSpecial" label="公斤" prop="weigh">
          <el-input v-model="refund.weigh" style="width:80px;" placeholder="公斤"></el-input>
        </el-form-item>
        <el-form-item label="金额(元)" prop="amt">
          <el-input type="number" v-model="refund.amt" style="width:120px;" placeholder="金额"></el-input>
        </el-form-item>
        <el-form-item label="退款备注" prop="remark">
          <el-input type="textarea" :rows="4" placeholder="请输入退款备注" v-model="refund.remark"></el-input>
        </el-form-item>
      </el-form>
      <el-row style="text-align:right; margin-top:10px;">
        <el-button type="default" @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"

export default {
  name: "refund",
  props: {
    title: {
      default: "商品"
    },
    row: {
      type: Object
    },
    type:{
      default:1
    }
  },
  components: {
  },
  computed: {
    isSpecial() {
      if (isNull(this.rowData.snapshot)) return false
      return this.rowData.snapshot.is_special
    }
  },
  filters: {
    numFilter: function (value) {
      let realVal = Number(value).toFixed(2)
      return realVal
    }
  },
  data() {
    return {
      showDia: false,
      refund: {
        len: 0,
        weigh: 0,
        amt: 0,
        remark: ''
      },
      rowData: {}
    }
  },
  methods: {
    handleShipClick() {

    },
    handleShow(row) {
      this.showDia = true
      this.rowData = row
      console.log(row)
    },
    handleClose() {
      this.showDia = false
      this.rowData = {}
      this.refund = {
        len: 0,
        weigh: 0,
        amt: 0,
        remark: ''
      }
    },
    handleSubmit() {
      let total = this.rowData.snapshot.price * this.rowData.amount
      //判断数值
      if (this.refund.amt > total)
      {
        return errorMsg(this, '退款金额超出产品总额')
      }

      let id = this.rowData.id
      let params = Object.assign({ id: id, type: this.type, special: this.isSpecial ? 1 : 0, common: this.refund })

      //请求退款接口
      this.$store.dispatch('orderRefundById', params).then(res => {
        if (res.data.status == 1)
        {
          successMsg(this, '退款成功')
          this.$emit('refresh')
          this.handleClose()
        }
        else        {
          errorMsg(this, res.data.message)
        }
      })
    }
  }
}

</script>